//定义外号
const creator = 'sjl'
function xr() {
    // 1.获取数据
    axios({
        url: 'https://hmajax.itheima.net/api/books',
        params: {
            creator
        }
    }).then(e => {
        console.log(e);
        console.log(e.data.data);
        const arr = e.data.data
        //思路 array>map>join
        const xrarr = arr.map((e, i) => {
            const { id, bookname, author, publisher } = e
            console.log(id, bookname, author, publisher);
            return `<tr>
          <td>${i + 1}</td>
          <td>${bookname}</td>
          <td>${e.author}</td>
          <td>${publisher}</td>
          <td data-id='${id}'>
            <span class="del">删除</span>
            <span class="edit">编辑</span>
          </td>
        </tr>
            `
        })
        document.querySelector('.list').innerHTML = xrarr.join('')
    })
}
xr()
const addModal = new bootstrap.Modal(document.querySelector('.add-modal'))
document.querySelector('.add-btn').addEventListener('click', () => {
    addModal.hide()
    const addform = document.querySelector('.add-form')
    const data = serialize(addform, { hash: true, empty: true })
    console.log(data)
    axios({
        url: 'https://hmajax.itheima.net/api/books',
        method: 'post',
        data: {
            creator,
            ...data
        }
    }).then(e => {
        xr()
        addform.reset()
    })
})
document.querySelector('.plus-btn').addEventListener('click', () => {
    addModal.show()
})
//删除
document.querySelector('.list').addEventListener('click', (e) => {
    if (!e.target.classList.contains('del')) {
        return
    }
    console.log(e.target.parentNode.dataset);
    const { id } = e.target.parentNode.dataset
    axios({
        url: `https://hmajax.itheima.net/api/books/${id}`,
        method: 'delete'
    }).then(e => {
        xr()
    })
})
//修改
//通过js编辑模态框
const editModal = new bootstrap.Modal(document.querySelector('.edit-modal'))
document.querySelector('.list').addEventListener('click', (e) => {
    if (!e.target.classList.contains('edit')) {
        return
    }
    const { id } = e.target.parentNode.dataset
    console.log(id);
    axios({
        url:`https://hmajax.itheima.net/api/books/${id}`
    }).then(e=>{
        console.log(e);
        const arrbook = e.data.data
        console.log(arrbook);
        Object.keys(arrbook).forEach(e=>{
            document.querySelector(`.edit-modal .${e}`).value = arrbook[e]
        })
        editModal.show()
    })
})
//修改值
document.querySelector('.edit-btn').addEventListener('click',(e)=>{
    const addform = document.querySelector('.edit-form')
    const book = serialize(addform, { hash: true, empty: true })
    console.log(book);
    const {author,bookname,id,publisher}=book
    console.log(author,bookname,publisher,id);
    axios({
        url:`https://hmajax.itheima.net/api/books/${id}`,
        method:'put',
        data: {
            ...book,
            creator
        }
    }).then(e=>{
            xr()
            editModal.hide()
        })
})
